<template>
	<view class="content">
		<image class="headerImg" src="https://dm.static.elab-plus.com/csc20201001/%E7%84%A6%E7%82%B9%E5%9B%BE%402x.png" mode="widthFix"></image>
		<scroll-view class="projectList " scroll-x="true">
			<view class="project" v-for="(item,index) in projects" :key="index" @click="goToDetail(index)">
				<image :src="item.imageUrl" mode="widthFix"></image>
			</view>
		</scroll-view>
		<view class="videoContent" @click="goToW3Detail">
			<image class="w3Image" :src="videos[0].titleIcon" mode="widthFix"></image>
			<video class="video" id="myVideo" :src="videos[0].videoUrl" autoplay object-fit="cover" :controls="false" :muted="true" @play="isShowW3Cover=false"></video>
			<!-- #ifndef MP-TOUTIAO -->
			<cover-image v-if="isShowW3Cover" class="videoImg" :src="videos[0].videoCoverUrl" mode=""></cover-image>
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO -->
			<image v-if="isShowW3Cover" class="videoImg" :src="videos[0].videoCoverUrl" mode=""></image>
			<!-- #endif -->
		</view>
		<view class="videoContent" @click="goToCQTSDetail">
			<image class="tsImage" :src="videos[1].titleIcon" mode="widthFix"></image>
			<video class="video" id="myVideo1" :src="videos[1].videoUrl" autoplay object-fit="cover" :controls="false" :muted="true" @play="isShowTSCover=false"></video>
			<!-- #ifndef MP-TOUTIAO -->
			<cover-image v-if="isShowTSCover" class="tsVideoImg" :src="videos[1].videoCoverUrl" mode=""></cover-image>
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO -->
			<image v-if="isShowTSCover" class="tsVideoImg" :src="videos[1].videoCoverUrl" mode=""></image>
			<!-- #endif -->
		</view>
		<!-- <image class="wiiiBg" src="https://dm.static.elab-plus.com/csc20201001/WIII%402x.png" mode="widthFix"></image>
		<image class="tsBg" src="https://dm.static.elab-plus.com/csc20201001/%E5%A4%A9%E6%A3%AE%402x.png" mode="widthFix"></image> -->
		<!-- 康养人居 -->
		<view class="kyContent">
			<image class="kyBg" src="https://dm.static.elab-plus.com/csc20201001/%E9%A1%B9%E7%9B%AE-%E7%BA%B9%E7%90%861%20%281%29.png" mode="widthFix"></image>
			<image class="kyTitle" src="https://dm.static.elab-plus.com/csc20201001/%E6%A0%87%E9%A2%98_%E5%BA%B7%E5%85%BB%E4%BA%BA%E5%B1%85%402x.png" mode="widthFix"></image>
			<scroll-view class="kyProjectList " scroll-x="true">
				<view class="kyProject" v-for="(item,index) in kyList" :key="index" @click="goToKyDetail(index)">
					<image :src="item.imageUrl" mode="widthFix"></image>
				</view>
			</scroll-view>
		</view>
		<view class="videoContent" style="margin-bottom: 120rpx;" @click="goToQHDDetail">
			<image class="qhdImage" :src="videos[2].titleIcon" mode="widthFix"></image>
			<video class="video" id="myVideo2" :src="videos[2].videoUrl" autoplay object-fit="cover" :controls="false" :muted="true" @play="isShowQHDCover=false"></video>
			<!-- #ifndef MP-TOUTIAO -->
			<cover-image v-if="isShowQHDCover" class="qhdVideoImg" :src="videos[2].videoCoverUrl" mode=""></cover-image>
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO -->
			<image v-if="isShowQHDCover" class="qhdVideoImg" :src="videos[2].videoCoverUrl" mode=""></image>
			<!-- #endif -->
		</view>
		<!-- <image class="rhBg" src="https://dm.static.elab-plus.com/csc20201001/%E4%BA%A7%E5%9F%8E%E8%9E%8D%E5%90%88%402x.png" mode="widthFix"></image> -->
		<!-- 商务联系 -->
		<contact currTab="project"></contact>
	</view>
</template>

<script>
	import Contact from "../../components/contact/contact.vue"
	export default {
		data() {
			return {
				title: 'Hello',
				isShowW3Cover:true,
				isShowTSCover:true,
				isShowQHDCover:true,
				projects:[
					{imageUrl:"https://dm.static.elab-plus.com/csc20201001/%E6%B7%B1%E5%9C%B3%E4%B8%96%E7%BA%AA%E5%B1%B1%E8%B0%B7%402x.png"},
					{imageUrl:"https://dm.static.elab-plus.com/csc20201001/%E6%96%B0%E8%A5%BF%E5%85%B0%E5%A5%A5%E5%85%8B%E5%85%B0%E4%B8%9C%E5%8D%B0%402x.png"},
					],
				kyList:[
					{imageUrl:"https://dm.static.elab-plus.com/csc20201001/%E7%BB%84%207032%402x.png"},
					{imageUrl:"https://dm.static.elab-plus.com/csc20201001/%E6%B2%B3%E5%8D%97%E8%8D%A5%E9%98%B3-%E7%B4%A2%E6%B2%B3%E6%B9%BF%E5%9C%B0%402x.png"},
					{imageUrl:"https://dm.static.elab-plus.com/csc20201001/hnsmgd_icon.png"}
				],
				videos:[
					{
						titleIcon:"https://dm.static.elab-plus.com/csc20201001/w3_title_icon.png",
						videoUrl:'https://dm.static.elab-plus.com/csc20201001/W3.mp4',
						videoCoverUrl:'https://dm.static.elab-plus.com/csc20201001/W3-first.jpeg'
					},
					{
						titleIcon:"https://dm.static.elab-plus.com/csc20201001/ts_title_icon.png",
						videoUrl:'https://dm.static.elab-plus.com/csc20201001/ts.mp4',
						videoCoverUrl:'https://dm.static.elab-plus.com/csc20201001/ts-first.jpeg'	
					},
					{
						titleIcon:"https://dm.static.elab-plus.com/csc20201001/qhd_title_icon.png",
						videoUrl:'https://dm.static.elab-plus.com/csc20201001/qhd.mp4',
						videoCoverUrl:'https://dm.static.elab-plus.com/csc20201001/qhd-first.jpeg'	
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			goToDetail(index){
				if(index==0){ // 深圳世纪山谷
					uni.navigateTo({
						url:"../../pages/projectDetaail/SZSJSGDetail"
					})
				}else if(index==1){ //
					uni.navigateTo({
						url:"../../pages/projectDetaail/AKLDetail"
					})
				}
			},
			goToKyDetail(index){
				if(index==0){ // 
					uni.navigateTo({
						url:"../../pages/projectDetaail/TNXDDetail"
					})
				}else if(index==1){ //
					uni.navigateTo({
						url:"../../pages/projectDetaail/HNSDDetail"
					})
				}else if(index==2){ //
					uni.navigateTo({
						url:"../../pages/projectDetaail/HNSMDetail"
					})
				}
			},
			goToW3Detail(){
				uni.navigateTo({
					url:"../../pages/projectDetaail/W3Detail"
				})
			},
			goToCQTSDetail(){
				uni.navigateTo({
					url:"../../pages/projectDetaail/CQTSDetail"
				})
			}
			,
			goToQHDDetail(){
				uni.navigateTo({
					url:"../../pages/projectDetaail/QHDDetail"
				})
			}
			
		},
		components:{"contact" : Contact}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.headerImg {
			width: 750rpx;
			height: 974rpx;
		}
		.projectList {
			white-space: nowrap;
			width: 100%;
			box-sizing: border-box;
			margin-top: -200rpx;
			.project {
				display: inline-block;
				width: 480rpx;
				margin-left: 30rpx;
				image {
					width: 100%;
				}
			}
			.project:last-child{
				margin-right: 30rpx;
			}
		}
		.videoContent {
			width: 750rpx;
			position: relative;
			.w3Image {
				width: 678rpx;
				margin-left: 32rpx;
				margin-top: 108rpx;
				margin-bottom: 24rpx;
			}
			.tsImage {
				width: 320rpx;
				margin-left: 32rpx;
				margin-top: 134rpx;
				margin-bottom: 18rpx;
			}
			.qhdImage {
				width: 308rpx;
				margin-left: 410rpx;
			}
			.video {
				width: 100%;
				height: 960rpx;
			}
			.videoImg {
				position: absolute;
				left: 0;
				top: 206rpx;
				width: 100%;
				height: 960rpx;
			}
			.tsVideoImg {
				position: absolute;
				left: 0;
				top: 258rpx;
				width: 100%;
				height: 960rpx;
			}
			.qhdVideoImg {
				position: absolute;
				left: 0;
				top: 108rpx;
				width: 100%;
				height: 960rpx;
			}
		}
		.wiiiBg {
			width: 690rpx;
			margin-top: 108rpx;
		}
		.tsBg {
			width: 690rpx;
			margin-top: 134rpx;
		}
		.kyContent {
			position: relative;
			width: 750rpx;
			height: 1320rpx;
			margin-top: -108rpx;
			.kyBg {
				width: 100%;
				height: 1320rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}
			.kyTitle {
				width: 316rpx;
				margin-left: 36rpx;
				margin-top: 314rpx;
				margin-bottom: 20rpx;
			}
			.kyProjectList {
				white-space: nowrap;
				width: 100%;
				.kyProject {
					display: inline-block;
					width: 480rpx;
					margin-left: 30rpx;
					image {
						width: 100%;
					}
				}
				.kyProject:last-child{
					margin-right: 30rpx;
				}
			}
		}
		.rhBg {
			width: 690rpx;
			margin-top: -60rpx;
			margin-bottom: 80rpx;
		}
	}
	
</style>
